import React from 'react';
import { Outlet } from 'react-router-dom';
import { Layout as AntLayout, theme } from 'antd';
import FloatingNavigation from './FloatingNavigation';
import { useTheme } from '../store/ThemeContext';

const { Content } = AntLayout;

const Layout: React.FC = () => {
  const { themeType } = useTheme();
  const { token } = theme.useToken();

  return (
    <AntLayout style={{ 
      height: '100vh', 
      overflow: 'hidden',
      background: token.colorBgLayout,
    }}>
      {/* 悬浮导航组件 */}
      <FloatingNavigation />
      
      {/* 主内容区域 */}
      <Content style={{ 
        padding: '20px',
        background: token.colorBgLayout,
        minHeight: '100vh',
        overflow: 'auto',
      }}>
        <div style={{
          background: token.colorBgContainer,
          borderRadius: '12px',
          boxShadow: themeType === 'dark' 
            ? '0 2px 8px rgba(0,0,0,0.3)' 
            : '0 2px 8px rgba(0,0,0,0.1)',
          minHeight: 'calc(100vh - 40px)',
          padding: '24px',
          border: themeType === 'dark' ? '1px solid #303030' : 'none',
        }}>
          <Outlet />
        </div>
      </Content>
    </AntLayout>
  );
};

export default Layout;
